<template>
	<el-container>
		<el-main>

			<el-row>
				<el-col :span="24">
					<el-text size="large" type="primary">标签样式(一些重要的`状态`,`字段`,`数量值`,`Y/N`)</el-text>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2">
					<el-tag type="primary">111</el-tag>

					<el-tag type="success">222</el-tag>

					<el-tag type="warning">333</el-tag>

					<el-tag type="danger">444</el-tag>

					<el-tag type="info">555</el-tag>
				</el-col>
			</el-row>
			<el-row class="mt-2">
				<el-col :span="24" class="flex justify-start gap-2">
					<el-tag type="primary" effect="plain">111</el-tag>

					<el-tag type="success" effect="plain">222</el-tag>

					<el-tag type="warning" effect="plain">333</el-tag>

					<el-tag type="danger" effect="plain">444</el-tag>

					<el-tag type="info" effect="plain">555</el-tag>
				</el-col>
			</el-row>
			<el-row class="mt-2">
				<el-col :span="24" class="flex justify-start gap-2">
					<el-tag type="primary" effect="dark">111</el-tag>

					<el-tag type="success" effect="dark">222</el-tag>

					<el-tag type="warning" effect="dark">333</el-tag>

					<el-tag type="danger" effect="dark">444</el-tag>

					<el-tag type="info" effect="dark">555</el-tag>
				</el-col>
			</el-row>
			<el-divider />
			<el-row>
				<el-col :span="24">
					<el-text type="primary">按钮样式</el-text>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2">
					<el-button type="primary">123</el-button>
					<el-button type="success">123</el-button>
					<el-button type="danger">123</el-button>
					<el-button type="warning">123</el-button>
					<el-button type="info">123</el-button>
					<el-button >123</el-button>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2">
					<el-button type="primary"  plain>123</el-button>
					<el-button type="success" plain>123</el-button>
					<el-button type="danger" plain>123</el-button>
					<el-button type="warning" plain>123</el-button>
					<el-button type="info" plain>123</el-button>
					<el-button plain>123</el-button>
				</el-col>
			</el-row>

			<el-row class="mt-2">
				<el-col :span="24">
					<el-text size="large" type="primary">按钮样式规范</el-text>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2">
					<el-button type="primary" icon="plus" >新增</el-button>
					<el-button type="danger" icon="delete">删除(多行)</el-button>
					<el-button type="danger" icon="delete" plain>其他危险操作</el-button>

					<el-button type="info" icon="close">结束(反正操作终止相关的,其他功能禁止用)</el-button>
					<el-button type="success" icon="upload">导入</el-button>
					<el-button type="success" icon="Download" plain>导出</el-button>
					<el-button type="primary" icon="search" >查询</el-button>
					<el-button icon="refresh" plain >重置</el-button>
					<el-button type="warning" icon="back">功能相关(仅蓝绿黄三色+是否透明 自由发挥)</el-button>
					<el-button type="warning" icon="back" plain>功能相关(仅蓝绿黄三色+是否透明 自由发挥)</el-button>
				</el-col>
				<el-divider></el-divider>

				<el-col :span="24">
					<el-text size="large" type="primary">行内按钮样式规范</el-text>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2 mt-2">
					<el-text type="warning">行内`编辑删除按钮`:</el-text>
					<el-button type="primary" icon="edit"></el-button>
					<el-button type="danger" icon="delete"></el-button>
					<el-button type="info" plain icon="Printer"></el-button>
					<el-button type="primary" plain icon="View">预览</el-button>
					<el-text>(其他功能无法用图标明确其用途的加文字修饰)</el-text>
				</el-col>

				<el-col :span="24" class="flex justify-start gap-2 mt-2">
					<el-text type="warning">行内状态 `Y/N`</el-text>
					<el-tag type="success" effect="dark">Y</el-tag>
					<el-tag type="danger" effect="light">N</el-tag>
				</el-col>
				<el-divider></el-divider>

				<el-col :span="24">
					<el-text size="large" type="primary">弹框按钮规范</el-text>
				</el-col>
				<el-col :span="24" class="flex justify-start gap-2 mt-2">
					<el-button type="primary" icon="check">提交</el-button>
					<el-button icon="close">取消</el-button>
					<el-text type="warning">其他功能按钮参考上述`按钮样式规范`自由发挥</el-text>
				</el-col>

				<el-divider></el-divider>
				<el-col :span="24">
					<el-text size="large" type="primary">边框样式规范(不要出现密集边框)</el-text>
				</el-col>
				<el-col :span="6" class="flex justify-start gap-2 mt-2">
					<el-text type="primary">修改前</el-text>
					<img src="./image/border.png" width="100" alt="" />
				</el-col>
				<el-col :span="6" class="flex justify-start gap-2 mt-2">
					<el-text type="success">修改后</el-text>
					<img src="./image/border2.png" width="100" alt="" />
				</el-col>
			</el-row>
			<el-divider></el-divider>
			<el-row>
				<el-col :span="24">
					<el-text size="large" type="primary">其他注意事项</el-text>
				</el-col>
				<el-col :span="12">
					<el-text type="danger" >01.弹框表单组件 注意紧凑一点,不要太长和稀松</el-text> <br>
					<el-text type="danger" >02.主子表格一定要加上选中背景色 (表格属性 加上 highlight-current-row)</el-text><br>
					<el-text type="danger">03.字段太多出现滚动条的表格,固定字段一定要加上固定列</el-text><br>
					<el-text type="danger">04.只涉及主子表的,不允许使用展开行,请使用上下表结构</el-text><br>
				</el-col>
			</el-row>


		</el-main>
	</el-container>
</template>
<script setup lang="ts">

</script>
<style scoped lang="scss"></style>
